<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
    <style type="text/css">
        .layui-table-cell{height:40px;line-height:40px;}
    </style>
</head>
<body>

<blockquote class="layui-elem-quote quoteBox mod_default_box">
    <form class="layui-form">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" id="stu_name" name="stu_name" placeholder="请输入关键字" autocomplete="off" class="layui-input" />
            </div>
            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="search-stu-submit">
                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">所属企业</label>
            <div class="layui-input-inline">
                <select name="city" lay-verify="" lay-filter="qiye" id="qiye" lay-search>
                    <option value="">选择企业</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">所属商户</label>
            <div class="layui-input-inline">
                <select name="city" lay-verify="" lay-filter="business" id="business" lay-search>
                    <option value="">选择商户</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">员工状态</label>
            <div class="layui-input-inline">
                <select name="city" lay-verify="" lay-filter="status" id="status" lay-search>
                    <option value="">选择状态</option>
                    <option value="1">在职</option>
                    <option value="0">离职</option>
                </select>
            </div>
        </div>
    </form>
</blockquote>

<!--数据列表-->
<table class="layui-hide" id="test" lay-filter="stu-table"></table>

<script type="text/html" id="stu-toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    <!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>-->
</script>
<script type="text/html" id="checkboxTpl">
    <input type="checkbox" name="status" value="{{d.id}}" title="启用" lay-filter="lockDemo" {{ d.status == 1 ? 'checked' : '' }}>
</script>
<script src="../../js/layui/layui.js"></script>
<script src="../../js/layui/layui.all.js"></script>
<script src="../../js/token.js"></script>
<script src="../../js/config.js"></script>

<script>
    layui.use('table', function(){
        var $ = layui.$;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var businessId = "";
        var name = "";
        var qyId = "";
        var status = "";
        table.render({
            elem: '#test'
            ,id:'stu-table-id'//重载需要
            ,url:HOST+'businessStaff/getBusinessStaffList'
            ,title:'商户表'
            ,cols: [[
                {type:'numbers', title: '序号'}
                ,{field:'name',align : 'center',width : 140, title: '员工姓名'}
                ,{field:'bh',align : 'center',width : 140,title: '员工编号'}
                ,{field:'qyName',align : 'center',width : 160,title: '所属企业'}
                ,{field:'businessName',align : 'center',width : 125,title: '所属商户'}
                ,{field:'zhiye',align : 'center',width : 160,title: '员工职业'}
                ,{field:'phone',width : 160,align : 'center', title: '联系方式'}
                ,{field:'address',align : 'center', width : 185,title: '住址'}
                ,{field:'sfz',align : 'center', width : 220,title: '证件号码'}
                ,{field:'zmPicture',align : 'center', title: '证件照',width : 125,templet: '<div><img src="/upload/{{ d.zmPicture }}" style="width: 70px;height: 50px;" onclick="previewImgs(this)"></div>'}
                ,{field:'status',align : 'center', title:'状态',width:140, templet:function(res){
                        if(res.status == 1) {
                            return "在职"
                        }else{
                            return "离职"
                        }
                    }}
                ,{field:'createTime',align : 'center', width : 165,title: '入职时间'}
            ]]
            ,page: true
            ,page: {
                curr: layui.data("business_staff_page").index
            },
            done: (res, curr, count) => {
                layui.data("business_staff_page", {
                    key: 'index',
                    value: curr
                });
            }
        });

        $.ajax({
            url: HOST+"business/selectBusinessStatus"
            , type: "POST"
            , contentType: 'application/json'
            , data: {'status': 1}
            , success: function (data) {
                $.each(data.data, function (index, item) {
                    $('#business').append(new Option(item.name, item.id));// 下拉菜单里添加元素
                });
                layui.form.render("select");
            }
        });

        $.ajax({
            url:HOST+"qiye/selectqiyes" ,
            success:function(res){
                if(res.code == 200) {
                    for(var i in res.data) {
                        $("#qiye").append("<option value='"+res.data[i].id+"'>"+res.data[i].qyname+"</option>")
                    }
                    form.render()
                }
            }
        })

        //搜索操作
        form.on('submit(search-stu-submit)',function (data) {
            name = data.field.stu_name;
            table.reload('stu-table-id',{
                where: { "name": name,"businessId":businessId,"qyId":qyId,"status":status}
                ,page:{
                    curr:1
                }
            });
            return false;
        });

        form.on('select(business)', function(data){
            businessId = data.value
            name = $("#stu_name").val()
            table.reload('stu-table-id', {
                where: { "name": name,"businessId":businessId,"qyId":qyId,"status":status}
                , page: {
                    curr: 1
                }
            });
        });

        form.on('select(qiye)', function(data){
            qyId = data.value
            name = $("#stu_name").val()
            table.reload('stu-table-id', {
                where: { "name": name,"businessId":businessId,"qyId":qyId,"status":status}
                , page: {
                    curr: 1
                }
            });
        });

        form.on('select(status)', function(data){
            status = data.value
            name = $("#stu_name").val()
            table.reload('stu-table-id', {
                where: { "name": name,"businessId":businessId,"qyId":qyId,"status":status}
                , page: {
                    curr: 1
                }
            });
        });

        /*//表操作  监听操作
        table.on('tool(stu-table)',function (obj) {
            var data=obj.data;
            var event=obj.event;
            if(event==='edit'){
                layer.open({
                    type:2
                    ,title:"编辑员工信息"
                    ,skin:'layui-layer-molv'
                    ,area: ['95%', '95%'],
                    content:("edit_business_staff.html?id="+data.id+"&name="+data.name+"&phone="+data.phone+"&bh="+data.bh+"&address="+encodeURIComponent(data.address)
                        +"&businessName="+data.businessName+"&businessBh="+data.businessBh)
                    //content:$('#update-stu-layer')
                });
            }
        });*/

    });
</script>
<script>
    function previewImgs(obj) {
        var img = new Image();
        img.src = obj.src;
        //var height = img.height + 50; // 原图片大小
        //var width = img.width; //原图片大小
        var imgHtml = "<img src='" + obj.src + "' width='800px' height='500px'/>";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [800 + 'px', 550 + 'px'],// area: [width + 'px',height+'px'],  //原图显示
            shadeClose: true,
            scrollbar: false,
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }
</script>
</body>
</html>